﻿
.timeline {
    position: relative;
}
.timeline:before {
    border: 3px solid #CCCCCC;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 197px;
    position: absolute;
    top: 0;
    width: 0;
}
.timeline li {
    margin: 0 0 20px;
    position: relative;margin-right: 10px
}
.timeline li div.mark {
    background-color: #FFFFFF;
    border: 5px solid #CCCCCC;
    border-radius: 200px !important;
    height: 60px;
    left: 170px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 60px;
    z-index: 2;
}
.timeline li div.mark i {
    border: 2px solid #FFFFFF;
    border-radius: 200px !important;
    color: #FFFFFF;
    font-size: 30px;
    height: 50px;
    line-height: 33px;
    padding: 7px;
    width: 50px;
}
.timeline li div.time {
    left: 15px;
    position: absolute;
    text-align: right;
    width: 135px;
}
.timeline li div.time h3 {
    font-size:24px;
    margin: 3px 0 0;
}
.timeline li div.body {
    color: #FFFFFF;
    margin: 0 0 0 275px;
    position: relative;
}
.timeline li div.body  .body-content{
	padding: 15px;
}
.timeline li div.body .reply{
	;color: #fff;display: block;width: 100%;height: 31px;line-height: 28px;padding-left: 5px;border-top:1px solid #fff;
	 cursor: pointer;
}


.timeline li div.body .reply .btn-reply{
	 height: 30px;width: 60px;display: inline-block;border-left: 1px solid #fff;text-align: center;float: right;
	
}
.timeline li div.body .reply .btn-reply .fa{
	 line-height: 30px;
}
.timeline li div.body .reply .btn-reply i{
	color: #fff;
}
.timeline li div.body .reply .btn-reply:hover{
	background: rgba(0,0,0,0.3);
}
.timeline li div.body:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #FFFFFF rgba(0, 0, 0, 0) #FFFFFF #FFFFFF;
    border-image: none;
    border-left: 11px solid #FFFFFF;
    border-right: 11px solid rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 11px;
    content: "";
    position: absolute;
    right: 100%;
    top: 23px;
}
.timeline li div.body h2 {
    line-height: 32px;
    margin: 0 0 15px;font-size: 24px
}
.timeline li div.body h2 small {
    color: #FFFFFF;
}
.timeline li.yellow div.body, .timeline li.yellow div.mark, .timeline li.yellow div.body:after {
    background-color: #F2AE43;
}
.timeline li.yellow div.time h3 {
    color: #F2AE43;
}
.timeline li.blue div.body, .timeline li.blue div.mark, .timeline li.blue div.body:after {
    background-color: #30ABE0;
}
.timeline li.blue div.time h3 {
    color: #30ABE0;
}
.timeline li.green div.body, .timeline li.green div.mark, .timeline li.green div.body:after {
    background-color: #66C88D;
}
.timeline li.green div.time h3 {
    color: #66C88D;
}
.timeline li.red div.body, .timeline li.red div.mark, .timeline li.red div.body:after {
    background-color: #F06060;
}
.timeline li.red div.time h3 {
    color: #F06060;
}
.timeline li.purple div.body, .timeline li.purple div.mark, .timeline li.purple div.body:after {
    background-color: #C180E6;
}
.timeline li.purple div.time h3 {
    color: #C180E6;
}
.timeline li.brown div.body, .timeline li.brown div.mark, .timeline li.brown div.body:after {
    background-color: #BEA881;
}
.timeline li.brown div.time h3 {
    color: #BEA881;
}
.timeline li.pink div.body, .timeline li.pink div.mark, .timeline li.pink div.body:after {
    background-color: #EC2F87;
}
.timeline li.pink div.time h3 {
    color: #EC2F87;
}
@media (max-width: 767px) {
.timeline li div.time {
    bottom: 100%;
    color: #CCCCCC;
    left: auto;
    margin-bottom: 10px;
    right: 0;
    width: auto;
    z-index: 3;
}
.timeline li div.time h3 {
    color: #CCCCCC !important;
    display: inline;
    font-size: 16px;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.timeline:before {
    left: 28px;
}
.timeline li div.mark {
    left: 0;
}
.timeline li div.body {
    margin: 60px 0 0 110px;
}
}
@media (max-width: 480px) {
.timeline li div.body {
    margin: 60px 0 0;
}
.timeline li div.mark {
    display: none;
}
.timeline:before {
    display: none;
}
.timeline li div.body:after {
    border-color: #FFFFFF #FFFFFF rgba(0, 0, 0, 0);
    bottom: 100%;
    right: 10px;
    top: auto;
}
}
